<template>
	<view class="cateBox" :style="{top:navbarHeight+'px'}">
		<!-- 左侧列表 -->
		<scroll-view class="cate-left" :style="{height:residueHeight+'px'}" scroll-y="true" :scroll-top="verticalNavTop"
			scroll-with-animation>
			<view class="cate-left-list" v-for="(item,index) in data" :key="index"
				@click="item.id != 10000?tapselect(index):''">
				<!-- activeItem为选中状态 -->
				<view class="cate-left-item" v-if="item.id != 10000">
					<text :class="['text',currentTab==index?'activeText':'']">{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
		<!-- 右侧列表 -->
		<scroll-view class="cate-right" scroll-y="true" @scroll="mainScroll" :scroll-into-view="'cate-'+mainCur"
			scroll-with-animation>
			<view class="cate-img">
				<u-image :src="systemConfig.category_index_img" width="468rpx" height="115px"></u-image>
			</view>
			<view v-for="(item,index) in data" :key="index" :id="'cate-'+index">
				<view class="cate-right-title" v-if="item.id != 10000">{{item.name}}</view>
				<view class="cate-right-list">
					<view class="cate-right-item u-flex" v-for="(child,childindex) in item.children" :key="childindex"
						@click="itemClick(child)">
						<image class="image" :src="child.image" mode=""></image>
						<text class="text">{{child.name}}</text>
					</view>
				</view>
			</view>
			<view :style="{height:(lastHeight)+128+'px'}"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			data: {
				type: Array,
				default () {
					return []
				}
			},
			residueHeight: {
				type: Number,
				default: 0
			},
			navbarHeight: {
				type: Number,
				default: 0
			},
			apparatusCategoryIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentTab: 0,
				mainCur: 0,
				verticalNavTop: 0,
				list: [{}],
				isLoading: true,
				lastHeight: 0
			}
		},
		mounted() {
			this.getHeight().then(() => {
				// 执行监听事件
				this.tapselect(this.categoryIndex);
			});
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig
			})
		},
		watch: {
			apparatusCategoryIndex: {
				handler(newVal, oldVal) {
					this.tapselect(newVal);
				},
				immediate: true, // 添加 immediate 选项
			},
		},
		methods: {
			itemClick(item) {
				this.$emit('click', item)
			},
			//点击左侧按钮
			tapselect(index) {
				this.currentTab = index;
				this.mainCur = index;
				this.verticalNavTop = (index - 1) * 50;
			},
			//右侧滚动
			mainScroll(e) {
				let scrollTop = e.detail.scrollTop + 10 - 115;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						// 此处屏蔽，避免点击最后一个回退， 但是没有右边滚动指示
						if ((this.currentTab != this.list.length - 1) || this.currentTab == this.list.length - 1) {
							// if (this.currentTab != this.list.length - 1) {
							this.currentTab = i;
							this.verticalNavTop = (i - 1) * 50
							return false
						}
					}
				}
			},
			//获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
			getHeight() {
				return new Promise((resolve, reject) => {
					var top = 0;
					var bottom = 0;
					var temp = 0;
					for (let i = 0; i < this.data.length; i++) {
						let view = uni.createSelectorQuery().select("#cate-" + i)
						// #ifdef  MP-WEIXIN
						view = uni.createSelectorQuery().in(this).select("#cate-" + i);
						//	#endif
						view.fields({
							size: true
						}, data => {
							top = temp;
							bottom = temp + data.height;
							this.list[i] = {
								top: top,
								bottom: bottom
							};
							temp = bottom;
							if(data.height != 0) {
								this.lastHeight = this.residueHeight - data.height
							}
							this.isLoading = false;
							if (i === this.data.length - 1) {
								resolve(); // 所有异步操作完成后，调用resolve()
							}
						}).exec();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cateBox {
		background: #fff;
		display: flex;

		.cate-left {
			width: 224rpx;
			background: #FFFFFF;
			border-right: 2rpx solid #ECECEC;

			.cate-left-list {
				padding-top: 54rpx;

				.cate-left-item {
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						font-size: 26rpx;
						color: #999999;
						display: block;
						text-align: center;
						padding-bottom: 12rpx;
					}

					.activeText {
						color: #000000;
						border-bottom: 4rpx solid #000000;
					}
				}
			}

			.cate-left-list:first-child {
				padding-top: 0;
			}
		}

		.cate-right {
			flex: 1;
			padding: 0 28rpx 0 30rpx;
			box-sizing: border-box;

			.cate-right-title {
				font-size: 26rpx;
				color: #000000;
				padding: 40rpx 0 20rpx;
			}

			.cate-right-list {
				height: auto;
				overflow: hidden;

				.cate-right-item {
					padding: 20rpx 0;
					border-bottom: 2rpx solid #ECECEC;

					.image {
						width: 100rpx;
						height: 100rpx;
						display: block;
					}

					.text {
						font-size: 24rpx;
						color: #000000;
						padding-left: 24rpx;
					}
				}
			}
		}
	}
</style>